<template>
  <div class="filter-dialog">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="600" :before-close="handleClose">
      <el-form ref="form" :model="node">
        <el-form-item label="字段名称：">{{ node.label }}</el-form-item>
        <el-form-item label="过滤类型：">
          <el-radio-group v-model="node.radio">
            <el-radio :label="3">包含</el-radio>
            <el-radio :label="6">排除</el-radio>
            <el-radio :label="9">表达式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="space-between">
            <el-col>包含</el-col>
            <el-col :span="12">
              <el-input :placeholder="`搜索 ${node.label}`" size="small" prefix-icon="el-icon-search" v-model="input"></el-input>
            </el-col>
          </el-row>
          <div style="background-color: rgb(244, 244, 244);padding: 10px;">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-row>
                <el-col v-for="city in cities.filter(item => item.indexOf(input) > -1)" :key="city">
                  <el-checkbox :label="city">{{city}}</el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
      <el-checkbox v-model="checked">在图表中显示过滤信息</el-checkbox>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const cityOptions = ['样例数据1', '样例数据2', '样例数据3', '样例数据4']
export default {
  name: 'FilterDialog',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    node: {
      type: Object,
      default: () => ({
        label: '',
        radio: ''
      })
    }
  },
  data () {
    return {
      dialogVisible: false,
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: false,
      checked: false,
      input: ''
    }
  },
  methods: {
    handleClose (done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done()
      //   })
      //   .catch(_ => {})
      this.dialogVisible = false
    },
    handleCheckAllChange (val) {
      this.checkedCities = val ? cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    }
  }
}
</script>

<style lang="less" scoped>

</style>
